<template>
  <view
    v-if="safeAreaPlace"
    class="pt-4"
    :style="{
      background: bgColor,
      paddingBottom: appStore.safeAreaInsetsBottom
        ? `${appStore.safeAreaInsetsBottom}px`
        : '32rpx',
    }"
  >
  </view>
  <view
    class="fixed z-2 bottom-0 left-0 center w-full bg-common pt-4"
    :style="{
      ...styleObj,
      background: bgColor,
      paddingBottom: appStore.safeAreaInsetsBottom
        ? `${appStore.safeAreaInsetsBottom}px`
        : '32rpx',
    }"
  >
    <slot></slot>
  </view>
</template>
<script setup>
import { useAppStore } from "@/store/app";
const appStore = useAppStore();
import { onLoad } from "@dcloudio/uni-app";
defineProps({
  safeAreaPlace: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: "#fff",
  },
  styleObj: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
onLoad(() => {
  console.log(appStore.safeAreaInsetsBottom);
});
</script>
<style lang="scss" scoped></style>
